<template>
  <div class="person_page">
    <div class="btn_box">
      <!-- 左边的部分 -->
      <div></div>
      <!-- 右边部分 -->
      <div>
        <el-button @click="handle('add')">添加人员</el-button>
      </div>
    </div>
    <el-table :data="newTableData" style="width: 100%">
      <el-table-column
      type="index"
      width="60"
      label="序号">
    </el-table-column>
      <el-table-column prop="studentId" label="学号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column label="是否留校" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.isShool ? '留校' : '离校' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="class" label="班级">
      </el-table-column>
      <el-table-column prop="afterTime" label="入学时间">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140px" align="center">
        <template slot-scope="scope">
          <el-button @click="handle('look', scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handle('edit', scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handle('del', scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=this.pageInfo.pageNember
      :page-sizes="[10, 20, 50, 100]"
      :page-size=this.pageInfo.pageSize
      layout="sizes, prev, pager, next"
      :total= this.pageInfo.total>
    </el-pagination>
    <personDialog :visible="isVisible" :title="title" :fatherInfo="fatherInfo" @updateVisible="updateVisible"
      @update="update" />

  </div>
</template>
<script>
import personDialog from '../components/personDialog.vue'
export default {
  components: {
    personDialog,
  },
  data() {
    return {
      newTableData:[],
      personnel: [],
      title: "新增",
      isVisible: false,
      fatherInfo: {},
      pageInfo:{
        pageSize :10,
        pageNember:1,
        total:0
      }
    }
  },
  methods: {
    getPersonnel() {
      this.$request.get('http://localhost:3003/personnel').then((res) => {
        console.log(res);
        const { data, status } = res;
        if (status == 200) {
          this.personnel = data;
          // console.log(personnel);
          this.pageInfo.total = data.length;
          let oldArr = JSON.parse(JSON.stringify(data));
          this.newTableData = this.getPagination(oldArr)[this.pageInfo.pageNember - 1]
          // console.log(this.newTableData);
        } else {
          this.$message.error('暂无数据');
          this.personnel = [];
          this.pageInfo.total = 0;
        }
      })
    },
    delData(id) {
      this.$request.delete(`http://localhost:3003/personnel/${id}`).then((res) => {
        console.log(res);
        const { status } = res;
        if (status == 200) {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.update()
        } else {
          this.$message({
            type: "error",
            message: "删除失败!"
          });
        }
      })
    },
    // handleClick(row){
    //   console.log(row);
    // },
    updateVisible() {
      this.isVisible = !this.isVisible
    },
    update() {
      this.getPersonnel();
    },
    handle(type, row) {
      this.fatherInfo = {}
      if (type == "del") {
        this.$confirm("此文件将永久删除，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonClass: "取消",
          type: "warning"
        }).then(() => {
          this.delData(row.id)
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
      } else {
        this.isVisible = true;
        if (type == "add") {
          this.title = "新增";
        } else if (type == "edit") {
          this.title = "编辑"
          this.fatherInfo = row
        } else if (type == "look") {
          this.title = "查看"
          this.fatherInfo = row
        }
      }
    },
    handleSizeChange(e){
      this.pageInfo.pageSize = e
      this.pageInfo.pageNember = 1
      this.getPersonnel() 
      
    },
    handleCurrentChange(e){
      this.pageInfo.pageNember = e
      this.getPersonnel()
      
    },
    getPagination(arr,newArr = []){
      if(arr.length > this.pageInfo.pageSize){
        let deleteArr = arr.splice(0,this.pageInfo.pageSize);
        newArr.push(deleteArr)
        this.getPagination(arr,newArr);
      }else{
        newArr.push(arr)
      }
      return newArr
    }
  },
  created() {
    this.getPersonnel()
  },
}
</script>
<style>
.person_page {
  width: 100%;
  height: 100%;
}

.btn_box {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-button {
    background: blue;
    margin-right: 10px;
    color: white;
  }
}
</style>